<template>
    <div class="ace-container">
      <!-- 官方文档中使用 id，这里禁止使用，在后期打包后容易出现问题，使用 ref 或者 DOM 就行 -->
      <div class="ace-editor" ref="ace"></div>
    </div>
  </template>
<script>
import ace from 'ace-builds'
import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入
import 'ace-builds/src-noconflict/theme-monokai' // 默认设置的主题
import 'ace-builds/src-noconflict/mode-javascript' // 默认设置的语言模式

export default {
  data () {
    return {
      aceEditor: null,
      themePath: 'ace/theme/monokai', // 不导入 webpack-resolver，该模块路径会报错
      modePath: 'ace/mode/javascript' // 同上
        
      // name: 'JavaScript',path: 'ace/mode/javascript'
      // name: 'SQL',path: 'ace/mode/sql'
      // name: 'HTML',path: 'ace/mode/html'
      // name: 'CSS',path: 'ace/mode/css'
      // name: 'SCSS',path: 'ace/mode/scss'
      // name: 'Json',path: 'ace/mode/json'
      // name: 'Java',path: 'ace/mode/java'
      // name: 'Text',path: 'ace/mode/text
    }
  },
  props:{
    maxLines:{
      type: Number,
      default: 30
    },
    minLines:{
      type: Number,
      default: 15
    },
    fontSize:{
      type: Number,
      default: 16
    },
    value: String
  },
  mounted () {
    this.aceEditor = ace.edit(this.$refs.ace, {
      maxLines: this.maxLines, // 最大行数，超过会自动出现滚动条
      minLines: this.minLines, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
      fontSize: this.fontSize, // 编辑器内字体大小
      theme: this.themePath, // 默认设置的主题
      mode: this.modePath, // 默认设置的语言模式
      tabSize: 4 ,// 制表符设置为 4 
      value: this.value ? this.value : '',
    })
    //只读
    //this.aceEditor.setReadOnly(true)
    //隐藏打印线
    this.aceEditor.setShowPrintMargin(false);
    this.initEditor();
  },
  methods: {
    // 内容变化的事件：
    initEditor() {
      this.aceEditor.getSession().on('change', this.change)
    },
    change() {
      // 获取编辑器的内容
      this.$emit('input', this.aceEditor.getSession().getValue())
    },
    setValue(value) {
      //设置编辑器内容
      this.aceEditor.setValue(value)
      console.log('this.aceEditor',this.aceEditor);
    },
    setMaxLines(value) {
      this.aceEditor.setOptions({
        maxLines: value,
      });
    },
  },
}
</script>